<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                >
    <f:view contentType="text/html">
        <p:dashboard id="board" model="#{dashboardBean.model}"   
            reorderListener="#{dashboardBean.handleReorder}" onReorderUpdate="growl">  

            <p:panel id="sports" header="Sports" toggleable="true" closable="true"  
                    closeListener="#{panelBean.handleClose}" onCloseUpdate="growl"  
                    toggleListener="#{panelBean.handleToggle}" onToggleUpdate="growl"  widgetVar="sportsWidget">  
                <h:outputText value="Sports Content" />  
                <f:facet name="options">  
                    <p:menu>  
                        <p:submenu label="Settings">  
                            <p:menuitem value="Toggle" url="#" icon="/images/update.png" onclick="sportsWidget.toggle()"/>  
                            <p:menuitem value="Remove" url="#" icon="/images/delete.png" onclick="sportsWidget.close()"/>  
                        </p:submenu>  
                    </p:menu>  
                </f:facet>  
            </p:panel>  

            <p:panel id="finance" header="Finance" toggleable="true" closable="true"  
                    closeListener="#{panelBean.handleClose}" onCloseUpdate="growl"  
                    toggleListener="#{panelBean.handleToggle}" onToggleUpdate="growl"  widgetVar="financeWidget">  
                <h:outputText value="Finance Content" />  
                <f:facet name="options">  
                    <p:menu>  
                        <p:submenu label="Settings">  
                            <p:menuitem value="Toggle" url="#" icon="/images/update.png" onclick="financeWidget.toggle()"/>  
                            <p:menuitem value="Remove" url="#" icon="/images/delete.png" onclick="financeWidget.close()"/>  
                        </p:submenu>  
                    </p:menu>  
                </f:facet>  
            </p:panel>  

            <p:panel id="lifestyle" header="Lifestyle" toggleable="true" closable="true"  
                    closeListener="#{panelBean.handleClose}" onCloseUpdate="growl"  
                    toggleListener="#{panelBean.handleToggle}" onToggleUpdate="growl" widgetVar="lifestyleWidget">  
                <h:outputText value="Lifestyle Content"  />  
                <f:facet name="options">  
                    <p:menu>  
                        <p:submenu label="Settings">  
                            <p:menuitem value="Toggle" url="#" icon="/images/update.png" onclick="lifestyleWidget.toggle()"/>  
                            <p:menuitem value="Remove" url="#" icon="/images/delete.png" onclick="lifestyleWidget.close()"/>  
                        </p:submenu>  
                    </p:menu>  
                </f:facet>  
            </p:panel>  

            <p:panel id="weather" header="Weather" toggleable="true" closable="true"  
                    closeListener="#{panelBean.handleClose}" onCloseUpdate="growl"  
                    toggleListener="#{panelBean.handleToggle}" onToggleUpdate="growl" widgetVar="weatherWidget">  
                <h:outputText value="Weather Content" />  
                <f:facet name="options">  
                <p:menu>  
                    <p:submenu label="Settings">  
                        <p:menuitem value="Toggle" url="#" icon="/images/update.png" onclick="weatherWidget.toggle()"/>  
                        <p:menuitem value="Remove" url="#" icon="/images/delete.png" onclick="weatherWidget.close()"/>  
                    </p:submenu>  
                </p:menu>  
            </f:facet>  
            </p:panel>  

            <p:panel id="politics" header="Politics" toggleable="true" closable="true"  
                    closeListener="#{panelBean.handleClose}" onCloseUpdate="growl"  
                    toggleListener="#{panelBean.handleToggle}" onToggleUpdate="growl" widgetVar="politicsWidget">  
                <h:outputText value="Politics Content" />  
                <f:facet name="options">  
                    <p:menu>  
                        <p:submenu label="Settings">  
                            <p:menuitem value="Toggle" url="#" icon="/images/update.png" onclick="politicsWidget.toggle()"/>  
                            <p:menuitem value="Remove" url="#" icon="/images/delete.png" onclick="politicsWidget.close()"/>  
                        </p:submenu>  
                    </p:menu>  
                </f:facet>  
            </p:panel>  
        </p:dashboard>        
    </f:view>
</ui:composition>